<template>
  <div class="contents">
    <PanelTitle title="产品分析" />

    <div class="mt conts">
      <div class="pics">
        <img src="@/assets/tzs.png" class="tzs-img" />
      </div>
      <div class="infoPanel">
        <div>
          <div class="infoTitle">太子参品种</div>
          <div class="infoNumss">
            <span class="infoNum">{{ baseStore.plantTaskStatist.medicinalNum }}</span>
            <span class="infoUnit">类</span>
          </div>
        </div>
        
   
        <div>
          <div class="infoTitle">太子参预期产量</div>
          <div class="infoNums">
            <span class="infoNum">{{ baseStore.plantTaskStatist.expectYield }}</span>
            <span class="infoUnit">吨</span>
          </div>
          <div class="infoSub">同比 {{ baseStore.plantTaskStatist.expectYieldRatio }}%</div>
        </div>
      </div>

      <div ref="maps" class="maps"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import { useBaseStore } from "@/stores/base";
const baseStore = useBaseStore()
let props = defineProps({
  base: {
    type: Object,
  },
});

const maps = ref(null);

watch(() => props.base, () => {
  init()
})

const init = async () => {

  let ress = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/plant/medicinal/statist/list",
    method: "get",
    params: {
      baseId: props.base.id,
      year: new Date().getFullYear()
    },
  });
  

  let legendData = ress.data.map((item) => {
    return item.medicinalName;
  });

  let pieData = ress.data.map((item) => {
    return {
      value: item.acreage,
      name: item.medicinalName,
    };
  });


  var myChart = echarts.init(maps.value);
  myChart.setOption({
    legend: {
      left: "left",
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      left: "center",
      data: legendData,
      textStyle: {
        fontSize: fitChartSize(9),
        color: "#fff",
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}:{c} ({d}%)'
    },
    title: {
      text: "单位：亩",
      textStyle: {
        fontSize: fitChartSize(9),
        fontWeight: "bold",
        color: "#fff",
      },
      right: fitChartSize(10),
      // subtext: 'Fake Data',
      // left: 'center'
    },
    // color: ["#D4A8FC", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
      {
        name: "外边框",
        type: "pie",
        clockWise: false,
        radius: [fitChartSize(30), fitChartSize(55)], //边框大小
        center: ["50%", "45%"], //边框位置
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(44, 215, 255, .2)",
          },
        },
        labelLine: {
          normal: {
            length: fitChartSize(45),
            length2: fitChartSize(45),
            show: false, // 隐藏所有指示线
          },
        },
        data: [
          {
            value: 0,
            // itemStyle: {
            //   normal: {
            //     borderWidth: 8, //设置边框粗细
            //     borderColor: "rgb(9,37,71, 0.5)", //边框颜色
            //   },
            // },
          },
        ],
      },
      {
        type: "pie",
        radius: [fitChartSize(35), fitChartSize(50)],
        center: ["50%", "45%"],
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          length: fitChartSize(-4),
          length2: fitChartSize(50),
          lineStyle: {
            color: "#2CD7FF",
          },
        },
        labelLayout: {
          // width: fitChartSize(60),
          verticalAlign: "bottom",
          align: "center",
          dy: fitChartSize(4),
          // dx: fitChartSize(-10),
        },
        label: {
          show: true,
          labelLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          normal: {
            // formatter: function (e) {
            //   return `{a|${e.data.name}}`; //：${e.data.value}%
            // },
            formatter: '{b} {d}%',
            color: '#fff',
            rich: {
              a: {
                color: "#2AD0B7",
                lineHeight: fitChartSize(18),
                fontSize: fitChartSize(9),
                align: "left",
              },
            },
          },
        },
        data: pieData,

      },
    ],
  });
}
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-34);
  }
}

table {
  margin: vh(6) 0;
  width: 100%;
  text-align: center;
}

th {
  font-weight: bold;
  font-size: vh(13);
  color: #00fff6;
  line-height: vh(24);
}

td {
  font-size: vh(10);
  color: #ffffff;
  line-height: vh(14);
}

.conts {
  display: flex;
  align-items: center;
  padding: 0 vw(14);

  .pics {
    width: vw(227);
    height: vh(153);
    background: rgba(9, 36, 44, 0.4);
    text-align: center;
  }
  .tzs-img{
    max-width: 100%;
    max-height: 100%;
  }

  .infoPanel {
    width: 20%;
    margin: 0 vw(12);

    >div {
      box-sizing: border-box;
      // width: vw(160);
      height: vh(80);
      background: rgba(9, 36, 44, 0.4);
      border: vh(1) solid #43e7ff;
      padding: 0 vw(20) 0px;
      margin: vh(5) 0 vh(5);
    }

    .infoTitle {
      color: #fff;
      font-size: vh(10);
      line-height: vh(30);
    }

    .infoNums {
      line-height: vh(20);
    }

    .infoNumss {
      line-height: vh(36);
    }

    .infoNum {
      color: #adffd7;
      font-size: vh(20);
      font: SourceHanSansCN-Bold;
    }

    .infoUnit {
      color: #adffd7;
      font-size: vh(16);
      font: SourceHanSansCN-Bold;
      margin-left: vw(4);
    }

    .infoSub {
      font-weight: 400;
      font-size: vh(10);
      color: #adffd7;
      line-height: vh(20);
    }
  }

  .maps {
    width: 40%;
    height: vh(180);
  }
}
</style>